<template>
  <view class="page-wrap">
    <view class="main-info" v-if="detail">
      <view class="image">
        <image class="image" :src="getImagePath(detail.hy_profile_url,true)" mode="aspectFill" v-if="detail.hy_profile_url">
        </image>
        <text v-else>头像</text>
      </view>
      <view class="info">
        <view class="top">
          <view class="hy-name">
            {{detail.hy_name}}
          </view>
          <!--  <view class="button">
            <button class="cu-btn sm round" @click="openAction">切换<text
                class="cuIcon-right margin-left-xs"></text></button>
          </view> -->
        </view>
        <view class="bottom">
          会员编号：{{detail.hy_no}}
        </view>
        <!--        <view class="bottom">
          所在地址：{{scheme.hy_addr}}
        </view>
        <view class="bottom">
          联系方式：{{scheme.hy_phone}}
        </view> -->
      </view>
    </view>
    <view class="radio-box">
      <view class="label">
        调理项目
      </view>
      <view class="value">
        {{detail.gy_project||''}}
        <!-- <u-subsection :list="subList" :current="curSub"></u-subsection> -->
      </view>
    </view>
    <view class="radio-box" v-if="detail">
      <view class="label">
        调理方案
      </view>
      <view class="value">
        <!-- {{}} -->
        {{detail.hp_name||detail.hp_no||''}}
      </view>
    </view>
    <view class="form-wrap">
      <view class="form-box">
        <view class="form-title">
          <view class="title">
            外调方案
          </view>
          <view class="handler">
            <button class="cu-btn bg-blue light round" @click="showScheme('out')">选择<text
                class="cuIcon-right"></text></button>
          </view>
        </view>
        <view class="form-content">
          <table-list :tabList="tabList" @close="del" type="out"></table-list>
        </view>
      </view>
      <view class="form-box">
        <view class="form-title">
          <view class="title">
            内养方案
          </view>
          <view class="handler">
            <button class="cu-btn bg-blue light round" @click="showScheme('inner')">选择<text
                class="cuIcon-right"></text></button>
          </view>
        </view>
        <view class="form-content">
          <table-list type="inner" :tabList="tabList" @close="del"></table-list>
        </view>
      </view>
      <view class="input-box">
        <view class="input-label">
          累计投资
        </view>
        <view class="input-value">
          {{moneyTotal||0}}
        </view>
      </view>
      <view class="button-box">
        <button class="cu-btn" @click="submit()">提交</button>
      </view>
    </view>
    <view class="cu-modal bottom-modal" @click="hideScheme" :class="{show:modalName==='scheme'}">
      <view class="cu-dialog" @click.stop>
        <view class="modal-title">
          <text></text>
          <text> {{schemeType==='inner'?"内养调理方法":schemeType==='out'?"外调调理方法":""}}</text>
          <text @click="hideScheme" class="cuIcon-close"></text>
        </view>
        <view class="scheme-modal">
          <view class="form-item">
            <view class="label">
              调理方法
            </view>
            <view class="value" @click="showGoodsList">
              <input type="text" v-model="formModal.goods_name" placeholder="输入关键词进行搜索" @input="showGoodsList" />
              <!-- <view class="select">
                请选择<text class="cuIcon-right"></text>
              </view> -->
            </view>
          </view>
          <view class="select-box" v-if="goodsList&&goodsList.length>0">
            <view class="select-item" v-for="item in goodsList" @click="selectGoods(item)">
              {{item.gd_name||""}}
            </view>
          </view>
          <view class="form-item" v-if="schemeType==='out'">
            <view class="label">
              经穴部位
            </view>
            <view class="value">
              <input type="text" v-model="formModal.illustration" />
            </view>
          </view>
          <view class="form-item" v-if="schemeType==='out'">
            <view class="label">
              单次时长
            </view>
            <view class="value">
              <input type="text" v-model="formModal.single_quantity" placeholder="分钟" />
            </view>
          </view>
          <view class="form-item no-border" v-if="schemeType==='out'">
            <view class="label">
              疗程次数
            </view>
            <view class="value">
              <input type="text" v-model="formModal.amount" />
            </view>
          </view>
          <view class="form-item" v-if="schemeType==='inner'">
            <view class="label">
              药用性味
            </view>
            <view class="value">
              <u-radio-group v-model="yyxw">
                <u-radio v-for="(item, index) in yyxwList" :key="index" :name="item.name">
                  {{item.name}}
                </u-radio>
              </u-radio-group>
            </view>
          </view>
          <view class="form-item" v-if="schemeType==='inner'">
            <view class="label">
              主要归经
            </view>
            <view class="value">
              <u-radio-group v-model="zygj">
                <u-radio v-for="(item, index) in zygjList" :key="index" :name="item.name">
                  {{item.name}}
                </u-radio>
              </u-radio-group>
            </view>
          </view>
          <view class="form-item no-border" v-if="schemeType==='inner'">
            <view class="label">
              数量
            </view>
            <view class="value">
              <input type="text" v-model="formModal.amount" placeholder="请输入数字" />
            </view>
          </view>
          <view class="form-item textarea">
            <view class="label">
              备注资料
            </view>
            <view class="value ">
              <textarea v-model="formModal.remark" placeholder="" />
            </view>
          </view>
        </view>
        <view class="button-box modal">
          <button class="cu-btn bg-blue round" @click="add2Mem">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import tableList from './tab-list.vue'
  export default {
    components: {
      tableList
    },
    data() {
      return {
        gy_no: '',
        scheme: null, //调理方案
        detail: null,
        schemeType: '',
        modalName: '',
        tabList: [],
        curSub: 0,
        yyxw: '', //药用性味
        yyxwList: [{
            name: "寒"
          },
          {
            name: "热"
          },
          {
            name: "温"
          },
          {
            name: "凉"
          }
        ],
        zygj: "",
        zygjList: [{
            name: '心'
          },
          {
            name: '肝'
          },
          {
            name: '脾'
          },
          {
            name: '肺'
          },
          {
            name: '肾'
          }
        ],
        formModal: {
          // gd_name: "",
          goods_name: "",
          gd_no: "",
          illustration: "",
          single_quantity: "",
          single_unit: "",
          unit_price: "",
          amount: 0,
          remark: "",
          within_is_true: ''
        },
        goodsList: [],
        subList: [{
            name: "体质"
          },
          {
            name: "糖尿病"
          },
          {
            name: "高血压"
          }
        ]
      }
    },
    computed: {
      moneyTotal() {
        return this.tabList.reduce((res, cur) => {
          if (cur._del !== true) {
            if(!cur.sum_price){
              res+=cur.unit_price*cur.amount
            }else{
              res += cur.sum_price
            }
          }
          return res
        }, 0)
      }
    },
    methods: {
      submit() {
        let delList = this.tabList.filter(item => item.id && item._del == true).map(item => item.id).toString()
        let addList = this.tabList.filter(item => item._isMem == true).map(item => {
          delete item._isMem
          return item
        })
        let hp_project = this.subList[this.curSub].value
        let req = [{
          "serviceName": "srvfyzh_health_tonning_record_update",
          "condition": [{
            // "colName": "gy_no",
            // "ruleType": "eq",
            // "value": this.gy_no,
            "colName": "id",
            "ruleType": "eq",
            "value": this.detail.id + ''
          }],
          "data": [{
            "gy_no": this.gy_no,
            "hy_no": this.detail.hy_no,
            "hp_no": this.detail.hp_no,
            "hy_name": this.detail.hy_name,
            "gy_project": hp_project,
            "child_data_list": [{
              "serviceName": "srvfyzh_health_tonning_detail_delete",
              "condition": [{
                colName: 'id',
                ruleType: 'in',
                value: delList
              }],
              "depend_keys": [{
                "type": "column",
                "add_col": "gy_no",
                "depend_key": "gy_no"
              }],
            }, {
              "serviceName": "srvfyzh_health_tonning_detail_add",
              "condition": [],
              "depend_keys": [{
                "type": "column",
                "add_col": "gy_no",
                "depend_key": "gy_no"
              }],
              "data": addList
            }]
          }]
        }]
        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_tonning_record_update', 'operate');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS') {
            uni.showModal({
              title: '提示',
              content: res.data.resultMessage,
              showCancel: false,
              success:(res)=>{
                if(res.confirm){
                  uni.navigateBack()
                }
              }
            })
            // this.getChild()
          } else {
            uni.showModal({
              title: '提示',
              content: res.data.resultMessage,
              showCancel: false
            })
          }
        })
      },
      add2Mem() {
        let modal = this.deepClone(this.formModal)
        modal._isMem = true
        // modal.within_is_true = this.schemeType=== 'inner'?"是":"否"
        if (this.schemeType === 'inner') {
          modal.illustration = `${this.yyxw} - ${this.zygj}`
        }
        this.tabList.unshift(modal)
        Object.keys(this.formModal).forEach(key => {
          this.formModal[key] = null
        })
        this.modalName = ''
      },
      selectGoods(e) {
        this.formModal.goods_name = e.gd_name
        this.formModal.goods_type = e.goods_type
        this.formModal.gd_no = e.gd_no
        this.formModal.single_quantity = e.single_quantity
        this.formModal.remark = e.gd_remark
        this.formModal.illustration = e.illustration
        this.formModal.unit_price = e.price
        this.formModal.single_unit = e.single_unit
        this.formModal.unit = e.unit
        this.formModal.within_is_true = this.schemeType === 'inner' ? "是" : "否"
        this.goodsList = []
      },
      showGoodsList() {
        let req = {
          "serviceName": "srvstore_goods_mgmt_select",
          "queryMethod": "select",
          "colNames": ["*"],
          "page": {
            "pageNo": 1,
            "rownumber": 10
          }
        }
        if (this.formModal.gd_name) {
          req["relation_condition"] = {
            "relation": "OR",
            "data": [{
              "relation": "AND",
              "data": [{
                "colName": "gd_no",
                "value": this.formModal.gd_name,
                "ruleType": "[like]"
              }]
            }, {
              "relation": "AND",
              "data": [{
                "colName": "gd_name",
                "value": this.formModal.gd_name,
                "ruleType": "[like]"
              }]
            }]
          }
        }
        let url = this.getServiceUrl('fyzhmd', 'srvstore_goods_mgmt_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data)) {
            this.goodsList = res.data.data
          }
        })
      },
      showScheme(e) {
        this.modalName = 'scheme'
        this.schemeType = e
      },
      hideScheme() {
        Object.keys(this.formModal).forEach(key => {
          this.formModal[key] = null
        })
        this.modalName = null
        this.schemeType = null
      },
      openAction() {
        let itemList = ['体质', '糖尿病', '高血压']
        uni.showActionSheet({
          itemList: ['体质', '糖尿病', '高血压'],
          success: (res) => {
            let result = itemList[res.tapIndex]
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
            this.curAction = result
          },
          fail: function(res) {
            console.log(res.errMsg);
          }
        });
      },
      del(e) {
        this.tabList = e
      },
      getDetail() {
        let req = {
          "serviceName": "srvfyzh_health_tonning_record_select",
          "colNames": ["*"],
          "condition": [{
            colName: "gy_no",
            ruleType: 'eq',
            value: this.gy_no
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 1
          },
        }
        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_tonning_record_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
            this.detail = res.data.data[0]
            this.getScheme()
            if (this.detail.gy_project) {
              this.curSub = this.subList.findIndex(item => item.name === this.detail.gy_project)
            }
          }
        })

      },
      getScheme() {
        if (!this.detail?.hp_no) {
          return
        }
        let req = {
          "serviceName": "srvfyzh_health_programme_select",
          "colNames": ["*"],
          "condition": [{
            colName: "hp_no",
            ruleType: 'eq',
            value: this.detail?.hp_no
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 1
          },
        }
        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_programme_select', 'select');
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
            this.scheme = res.data.data[0]
            // if (this.scheme.hp_project) {
            //   this.curSub = this.subList.findIndex(item => item.name === this.scheme.hp_project)
            // }
          }
        })
      },
      async getChild() {
        let req = {
          "serviceName": "srvfyzh_health_tonning_detail_select",
          "colNames": ["*"],
          "condition": [{
            "colName": "gy_no",
            "ruleType": "eq",
            "required": true,
            "value": this.gy_no
          }],
          "order": [],
        }
        let url = this.getServiceUrl('fyzhmd', 'srvfyzh_health_tonning_detail_select', 'select');
        let res = await this.$http.post(url, req)
        if (res.data.state === 'SUCCESS') {
          this.tabList = res.data.data
        }
      }

    },
    onLoad(option) {
      if (option.gy_no) {
        this.gy_no = option.gy_no
        this.getDetail()
        this.getChild()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrap {
    background-color: #F8F8FA;
    min-height: calc(100vh - var(--window-top));
    overflow: scroll;
    padding: 20rpx;

    .main-info {
      border-radius: 15rpx;
      width: 100%;
      background-color: #fff;
      padding: 20rpx;
      display: flex;

      .image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        line-height: 120rpx;
        text-align: center;
        border: 1rpx solid #f5f5f5;
        margin-right: 30rpx;
      }

      .info {
        flex: 1;

        .top {
          padding: 10rpx 0;
          display: flex;
          justify-content: space-between;

          .button {
            .cu-btn {
              color: #ADAEBB;
              background-color: #fff;
              border: 1rpx solid #f6f6f6;
            }
          }
        }

        .bottom {
          color: #ADAEBB;
        }
      }

    }

    .radio-box {
      display: flex;
      background-color: #fff;
      border-radius: 20rpx;
      padding: 20rpx 40rpx;
      margin: 20rpx 0;
      justify-content: space-between;
      align-items: center;

      .value {
        width: 500rpx;
      }
    }

    .form-wrap {
      background-color: #fff;
      border-radius: 15rpx;
      margin: 20rpx 0;
      padding: 20rpx;

      .form-box {
        padding-bottom: 20rpx;

        .form-title {
          display: flex;
          padding: 20rpx 20rpx 0;
          justify-content: space-between;
          align-items: center;

          .title {
            font-size: 16px;
            font-family: 苹方-简;
            font-weight: normal;
            color: #333333;
          }

          .handler {
            .cu-btn {
              &.light {
                background-color: #F5F8FF;
              }
            }
          }
        }

        .form-content {}
      }

      .input-box {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        font-family: 苹方-简;
        border: 1rpx solid #F2F1F6;
        border-radius: 15rpx;

        .input-label {
          font-size: 14px;
          color: #333333;
        }

        .input-value {
          font-size: 14px;
          font-weight: normal;
          color: #0088FE;
        }
      }

      .button-box {
        text-align: center;
        padding-top: 20rpx;

        .cu-btn {
          border-radius: 22px;
          width: 319px;
          height: 44px;
          background: #0088FE;
          color: #fff;
          font-size: 16px;
          font-family: 苹方-简;
          font-weight: normal;
        }
      }
    }

    .modal-title {
      text-align: center;
      font-weight: bold;
      padding: 20rpx;
      background-color: #fff;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      margin: 20rpx;
      border-radius: 20rpx;
      align-items: center;
    }

    .scheme-modal {
      background-color: #fff;
      margin: 20rpx;
      padding: 20rpx;
      border-radius: 20rpx;

      .select-box {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx 0;

        .select-item {
          min-width: 30%;
          background-color: #f8f8f8;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          border-radius: 20rpx;
          padding: 10rpx;
        }
      }

      .form-item {
        display: flex;
        padding: 20rpx;
        align-items: center;
        border-bottom: 1rpx solid #F2F1F6;
        height: 100rpx;

        &.no-border {
          border: none;
        }

        &.textarea {
          flex-direction: column;
          border: 1px solid #F2F1F6;
          border-radius: 8px;
          height: 200rpx;
          align-items: flex-start;

          .value {
            width: 100%;
            height: 100%;
            text-align: left;
          }

          textarea {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
          }
        }

        .label {
          width: 20%;
          font-weight: bold;
        }

        .value {
          flex: 1;
          font-size: 16px;
          font-family: 苹方-简;
          font-weight: normal;
          line-height: 0px;
          color: #0088FE;
          opacity: 1;
          text-align: right;
        }
      }
    }

    .button-box {
      &.modal {
        text-align: center;
        padding: 40rpx;

        .cu-btn {
          width: 80%;

        }
      }
    }
  }
</style>
